<template>
    <el-card>
    <el-form label-width="80px" inline size="small">
      <el-form-item label="目录名称">
        <el-input v-model="page.directoryName" />
      </el-form-item>
      <el-form-item label="状态">
        <!-- v-model 绑定了对象里面的属性 即使对象里面没有定义 也会在点击的时候自动生成 -->
        <el-select v-model="page.state" placeholder="请选择">
          <el-option value="1" label="启用"></el-option>
          <el-option value="0" label="禁用"></el-option>
        </el-select>
      </el-form-item>
      <el-button size="small" @click="clear">清除</el-button>
      <el-button type="primary" size="small" @click="search">搜索</el-button>
      <el-button
        style="float: right"
        icon="el-icon-edit"
        type="success"
        size="small"
        @click="addDir"
        >新增目录</el-button
      >
      <el-button
        style="float: right"
        icon="el-icon-back"
        type="text"
        size="small"
        v-if="$route.query.id||false"
        @click="$router.go(-1)"
        >返回学科</el-button
      >
    </el-form>
    <el-alert :title="elalert" type="info" show-icon :closable="false" />
      <el-table :data="list">
        <el-table-column
          stripe
          fit="true"
          label="序号"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column
          fit="true"
          prop="subjectName"
          label="所属学科"
          align="center"
        ></el-table-column>
        <el-table-column
          fit="true"
          prop="directoryName"
          label="目录名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="username"
          fit="true"
          label="创建者"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="addDate"
          fit="true"
          label="创建日期"
          align="center"
        >
          <template v-slot="{ row }">
            <!-- 将时间进行格式化 -->
            {{ row.addDate | formatDate1 }}
          </template>
        </el-table-column>
        <el-table-column
          fit="true"
          prop="totals"
          label="面试题数量"
          align="center"
        ></el-table-column>

        <el-table-column
          :formatter="formatDisplay"
          fit="true"
          prop="state"
          label="状态"
          align="center"
        ></el-table-column>
        <el-table-column fit="true" label="操作" align="center">
          <template v-slot="{ row }">
            <el-button type="text" @click="statuDir(row)">{{
              row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              @click="editDir(row.id)"
              :disabled="row.state === 1 ? true : false"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="edlDir(row.id)"
              :disabled="row.state === 1 ? true : false"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagination"
        background
        :current-page="page.page"
        :page-size="page.pagesize"
        :page-sizes="[3, 5, 8, 10]"
        layout="prev, pager, next,sizes,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="changePage"
      />
         <!-- 弹窗 -->
    <dir-add
      ref="dirAdd"
      :showDialog.sync="showDialog"
      @getDirList="getDirList()"
    />
    </el-card>
</template>

<script>
import { list, remove, changeState } from '../../api/hmmm/directorys'
import { formatDate } from './filters'
import DirAdd from '../components/directorys-add.vue'
import SubjectEnum from '../../api/base/baseApi'
export default {
  // 注册过滤器
  filters: {
    formatDate1: formatDate
  },
  components: {
    DirAdd
  },
  data () {
    return {
      list: [], // 接收数据
      elalert: '',
      subId: this.$route.query.id, // 接收学科的id
      page: {
        page: 1, // 当前页码
        pagesize: 10, // 每页展示条
        directoryName: ''
      },
      total: 0, // 总数
      showDialog: false
    }
  },
  created () {
    this.getDirList()
    this.formatDisplay()
  },
  methods: {
    // 获取目录列表
    async getDirList () {
      // 如果有学科id 就跳转到目录页面重新刷新数据
      if (this.subId) {
        this.page.subjectID = this.$route.query.id
        const { data } = await list(this.page)
        this.total = data.counts
        this.list = data.items
        this.elalert = `数据一共${data.counts}条`
      } else {
        const { data } = await list(this.page)
        this.total = data.counts
        this.list = data.items
        this.elalert = `数据一共${data.counts}条`
      }
    },
    // 最新码数
    changePage (newPage) {
      this.page.page = newPage
      this.getDirList()
    },
    // 每页条数更新
    handleSizeChange (newSize) {
      this.page.pagesize = newSize
      this.getDirList()
    },
    // 点击新增按钮
    addDir () {
      this.showDialog = true
    },
    // 点击修改
    editDir (id) {
      this.$refs.dirAdd.detail(id)
      this.showDialog = true
    },
    // 点击删除
    async edlDir (id) {
      try {
        // 提示框
        await this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(id)
        this.$message.success('删除成功')
        if(this.list.length===1){
          this.page.page=this.page.page-1
        }
        this.getDirList()
      } catch (error) {
        console.log(error)
      }
    },
    formatDisplay (row, column, cellValue, index) {
      // cellValue是每一行是否显示所对应的值
      // ?. 可选链操作符 问号前面没有值就不执行后面的 有值就往下执行
      const obj = SubjectEnum.status.find(
        (item) => item.id === cellValue?.toString()
      )
      return obj ? obj.value : '未知'
    },
    // 点击启用按钮
    async statuDir (row) {
      row.state = row.state === 0 ? 1 : 0
      await changeState(row)
      this.getDirList()
      this.$message.success('修改成功')
    },
    // 点击搜索
    search () {
      this.getDirList()
    },
    // 点击清除
    clear () {
      this.page = {
        page: 1, // 当前页码
        pagesize: 10, // 每页展示条
        directoryName: ''
      }
      this.getDirList()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  padding-top: 26px;
  padding-left: 27px;
  padding-right: 27px;
}
:deep(.el-input__inner) {
  height: 33px;
}
.el-alert {
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: end;
  margin-top: 20px;
}
:deep(.el-table th.is-leaf){
  background-color: #fafafa;
  border-bottom: 2px solid #e8e8e8;
}
:deep(.el-card__body){
  margin: 10px 8px;
}
</style>
